import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { Table, Spin, Form, Row, Col, Input, Button } from 'antd'
import echarts from 'echarts'
import { mapColor } from 'lib/fun'

const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    color: mapColor(),
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        axisLine: {
          lineStyle: {
            color: '#d9d9d9'
          }
        }
    },
    yAxis: {
        type: 'category',
        data: [],
        axisLine: {
          lineStyle: {
            color: '#d9d9d9'
          }
        }
    },
    series: [
        {
            name: '2011年',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
        }
    ]
};


class ModuleName extends Component {
    constructor(props) {
    super(props);
    this.state = {
      loading: false
    }
  }

  componentDidMount(){
    this.chart = echarts.init(document.getElementsByClassName(this.props.setClass)[0]);
    this.chart.setOption(option);
    
    window.addEventListener('resize', this.handleResize); 
  }

  handleResize = (e)=>{
    this.chart.resize();
  }
  
  componentWillUnmount() {  
    window.removeEventListener('resize', this.handleResize);  
  }

  componentWillReceiveProps(nextProps){
    if(nextProps.common.user&&nextProps.common.user.user&&this.state.treeData.length == 0){
      this.loadArea(nextProps.common.user.user.areaId);
    }
  }

  fun = () => {
    
  }
  
  render() {

    return (
      <Spin spinning={this.state.loading}>
          <div className={this.props.setClass} style={{height: 300}}></div>
      </Spin>
    )
  }
}

module.exports = ModuleName
